<div class="crop-image-container">
  <img [attr.src]="imageData.url" style="max-width: 800px" />
  <form dForm [layout]="layoutDirection" ngForm>
    <d-form-item>
      <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'帮助.匹配.匹配方法选择' | translate">匹配方法选择</d-form-label>
      <d-form-control>
        <d-select [options]="matchMethodList" name="名称" [filterKey]="'名称'" [(ngModel)]="currentMethod"></d-select>
      </d-form-control>
    </d-form-item>
  </form>

  <container-element [ngSwitch]="currentMethod['名称']">
    <app-image-match-form #imageMatchForm *ngSwitchCase="'图片匹配'" [range]="range"></app-image-match-form>
    <app-binary-image-match-form #binaryImageMatchForm *ngSwitchCase="'二值图片匹配'" [range]="range"
      (previewImage)="onPreviewImage($event)"></app-binary-image-match-form>
    <app-no-image-match-form #noImageMatchForm *ngSwitchCase="'无图匹配'" [coordinate]="coordinate"></app-no-image-match-form>
    <app-ocr-form #ocrForm *ngSwitchCase="'光学字符识别'" [range]="rawRange" [projectInfo]="projectInfo"></app-ocr-form>
    </container-element>

  <div class="modal-footer">
    <d-button (click)="submit()" bsStyle="primary" circled="true">提交</d-button>
  </div>
</div>

<!-- 图片预览，默认不显示，等到按钮触发才显示 -->
<div dImagePreview [customSub]="customImageSub" [zIndex]="1150" [backDropZIndex]="1140" [disableDefault]="true"
  style="display: none;">
  <img [attr.src]="imgPreviewSrc" style="max-width: 800px" />
</div>